<#include "/shared/layout.ftl" />
<@layoutHead title="路由列表"></@layoutHead>

<@layoutBody titles=["路由列表", "修改路由"]>

<blockquote class="layui-elem-quote">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" value="" placeholder="请输入关键字" class="layui-input search_input">
        </div>
        <a class="layui-btn search_btn">查询</a>
    </div>
    <div class="layui-inline">
        <button id="refreshButton" class="layui-btn layui-btn-small layui-btn-primary">
            <i class="layui-icon">&#x1002;</i>更新
        </button>
    </div>
    <div class="layui-inline">
        <button id="removeButton" class="layui-btn layui-btn-small layui-btn-primary">
            <i class="layui-icon">&#xe640;</i>批量删除
        </button>
    </div>
    <div class="layui-inline">
        <div class="layui-form-mid layui-word-aux">本页面刷新后除新添加的文章外所有操作无效，关闭页面所有数据重置</div>
    </div>
</blockquote>



<table id="routeTable" lay-filter="routeTable"></table>

<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>

<script type="text/html" id="routesToolbar">
    <a class="layui-btn layui-btn-mini" onclick="addRoute(this);" lay-event="detail">添加</a>
</script>

<script type="text/javascript">
    var table;
    var options = {
        id: 'routeTable',
        elem: '#routeTable',
        url: '${baseUrlAdmin}/route/listAjax',
        method: 'post',
        page: true,
        limits: [2, 10, 30, 60, 90, 150, 300],
        limit: 10,
        request: {pageName: 'pageIndex', limitName: 'pageSize'},
        response: {
            statusName: 'code',   //数据状态的字段名称，默认：code
            statusCode: 0,        //成功的状态码，默认：0
            msgName: 'message',        //状态信息的字段名称，默认：msg
            countName: 'total',     //数据总数的字段名称，默认：count
            dataName: 'data'        //数据列表的字段名称，默认：data
        },
        even: true,
        size: 'sm',
        loading: true,
        cols: [[
            {checkbox: true},
            {field: 'id', title: 'ID', width: 80, align: 'center'},
            {field: 'url', title: '链接', width: 200, align: 'left'},
            {field: 'path', title: '路径', width: 350, align: 'left'},
            {field: 'remark', title: '备注', width: 150, align: 'left', edit: 'text'},
            {field: 'value', title: '权限值', width: 100, align: 'center', edit: 'text'},
            {field: 'createTime', title: '添加时间', width: 200, align: 'center'},
            {field: 'updateTime', title: '修改时间', width: 200, align: 'center'},
            {field: 'status', title: '状态', width: 80, align: 'center'},
            {title: '操作', fixed: 'right', width: 150, align: 'center', toolbar: '#toolbar'}
        ]]
    };
    layui.use('table', function () {
        table = layui.table;
        table.render(options);
        table.on('edit(routeTable)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据
            $.post('${baseUrlAdmin}/route/edit', obj.data, function (data) {
                if (data.code !== 0) {
                    layer.alert(data.message);
                }
            });
        });

        //监听工具条
        table.on('tool(routeTable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            var index = tr.data('index');
            var tds = tr.find('td');
            if (layEvent === 'detail') { //查看
                console.log('查看 第' + index + '行');
                var titles = ['ID', '链接', '路径', '备注', '权限值', '添加时间', '修改时间', '状态'];
                var ulNode = '<ul>';
                $.each(titles, function (index, item) {
                    ulNode += '<li>{0}:{1}</li>'.format(item, tds.eq(index+1).text());
                });
                ulNode += '</ul>';
                layer.open({title: '查看', content: ulNode, area: 'auto', maxWidth: 500});
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    var id = parseInt(tds.eq(1).text());
                    $.post('${baseUrlAdmin}/route/remove', {idArray: id}, function (data) {
                        if (parseInt(data.code) === 0) {
                            obj.del();
                            layer.close(index);
                        } else {
                            layer.alert(data.message);
                        }
                    });
                });
            } else if (layEvent === 'edit') { //编辑
                console.log('编辑 第' + index + '行');
                obj.update({
                    name: '123',
                    parentName: 'xxx'
                });
            }
        });

        //以复选框事件为例
        table.on('checkbox(routeTable)', function (obj) {
            //console.log(obj)
            //var checkStatus = table.checkStatus('testTable'); //test即为基础参数id对应的值
            //console.log(checkStatus.data) //获取选中行的数据
            //console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
            //console.log(checkStatus.isAll) //表格是否全选
        });
    });

    var addRoute = function (object) {
        var tds = $(object).parent().parent().find('td');
        var params = {
            url: tds.eq(0).text(),
            path: tds.eq(1).text(),
            remark: tds.eq(2).text()
        };
        $.post('${baseUrlAdmin}/route/add', params, function (data) {
            layer.alert(data.message);
            if (data.code === 0) {
                table.reload('routeTable', options);
            }
        });
    };

    $('#removeButton').on('click', function (e) {
        var checkStatus = table.checkStatus('routeTable');
        var confirmMessage = checkStatus.isAll ? '确定要全部删除吗' : '确定要删除吗';
        layer.confirm(confirmMessage, function (index) {
            if (checkStatus.data.length === 0) {
                layer.alert('最低选中一行');
                return false;
            }
            var idArray = [];
            $.each(checkStatus.data, function (index, item) {
                idArray.push(item.id);
            });
            $.post('${baseUrlAdmin}/route/remove', {idArray: idArray.join(',')}, function (data) {
                if (parseInt(data.code) === 0) {
                    table.reload('routeTable', options);
                } else {
                    layer.alert(data.message);
                }
            });
            layer.close(index);
        });
    });

    $('#refreshButton').on('click', function (e) {
        $.post('${baseUrlAdmin}/route/getRoutes', function (data) {
            if (data.code === 0) {
                var tableNode = '<table cellspacing="0" cellpadding="0" border="0" class="layui-table" lay-size="sm">';
                tableNode += '<tr>';
                tableNode += '<th>链接</th><th>路径</th><th>名称</th><th>是否存在</th><th>操作</th>';
                tableNode += '<tr>';
                if (data.data !== null) {
                    $.each(data.data, function (index, item) {
                        tableNode += '<tr>';
                        tableNode += '<td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td>'.format(item.url, item.path, item.remark, item.flag);
                        tableNode += '<td>';
                        if (!item.flag) {
                            tableNode += '<a class="layui-btn layui-btn-mini" onclick="addRoute(this);" lay-event="detail">添加</a>';
                        }
                        tableNode += '</td>';
                        tableNode += '<tr>';
                    });
                }
                tableNode += '</table>';
                layer.open({title: '更新路由', content: tableNode, area: 'auto', maxWidth: 2000, maxHeight: 600});
            } else {
                layer.alert(data.message);
            }
        });
    <#--var routesTable = document.createElement('table');-->
    <#--routesTable.id = "routesTable";-->
    <#--routesTable.style = 'display:none;';-->
    <#--layer.open({title: '更新路由', content: routesTable.outerHTML, area: 'auto', maxWidth: 2000});-->
    <#--layui.use('table', function () {-->
    <#--var routeTable = layui.table;-->
    <#--routeTable.render({-->
    <#--id: 'routesTable',-->
    <#--elem: '#routesTable',-->
    <#--url: '${baseUrlAdmin}/route/getRoutes',-->
    <#--method: 'post',-->
    <#--response: {-->
    <#--statusName: 'code',   //数据状态的字段名称，默认：code-->
    <#--statusCode: 0,        //成功的状态码，默认：0-->
    <#--msgName: 'message',        //状态信息的字段名称，默认：msg-->
    <#--countName: 'total',     //数据总数的字段名称，默认：count-->
    <#--dataName: 'data'        //数据列表的字段名称，默认：data-->
    <#--},-->
    <#--even: true,-->
    <#--size: 'sm',-->
    <#--loading: true,-->
    <#--cols: [[-->
    <#--{field: 'url', title: '链接', width: 200, align: 'left'},-->
    <#--{field: 'path', title: '路径', width: 350, align: 'left'},-->
    <#--{field: 'remark', title: '备注', width: 150, align: 'left', edit: 'text'},-->
    <#--{field: 'flag', title: '是否存在', width: 80, align: 'center'},-->
    <#--{title: '操作', fixed: 'right', width: 150, align: 'center', toolbar: '#routesToolbar'}-->
    <#--]]-->
    <#--});-->
    <#--});-->

    });
</script>
</@layoutBody>